<template>
  <div>
    <div class="title_name">
      <div>热播视频</div>
      <div @click="goVideoMore">更多</div>
    </div>
    <div>
      <div class="hot_video_content">
        <div class="nab_bar">
          <div :class="{active_title:active === item.diyname}" v-for="item in videoList" :id="item.id"
               @click="checkVideo(item.diyname)">{{item.name}}
          </div>
        </div>
        <div class="video_hot">
          <!--<div class="video_hot_content" :class="{active:active === item.diyname}" v-for="(item,index) in videoList" :id="item.id">-->
          <div class="video_hot_content active">
            <div class="video_img">
              <div v-for="item in hotVideoData" @click="goVideoDetails(item.id)">
                <img :src="item.image" alt="">
                <div class="title">{{item.title | dropDate(6)}}</div>
                <div class="content">{{item.description | dropStr(6)}}</div>
              </div>

              <!--<div>-->
                <!--<img src="../assets/image/vide.png" alt="">-->
                <!--<div class="title">无忧房视频海南</div>-->
                <!--<div class="content">探寻海南记忆</div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getChildVideo,hotVideo} from '../axios/api';
import {getCityName} from '../assets/js/cache';

export default {
    name: 'HotVideo',
    data() {
      return {
        active: 'sphn',
        videoList: [],
        hotVideoFormData:{
          diyname:'sphn',
          // city_code:getCityName().CODE
        },
        hotVideoData:{}
      }
    },
  created(){
    this.getVideoChild();
    this.getHotVideoList();
  },
    methods: {
      //查看更多
      goVideoMore(){
        this.$store.commit('setVideo',this.active);
        this.$router.push({name:'AllVideo'})
      },
      //跳转至视频详情页面
      goVideoDetails(id){
        let that = this;
        that.$router.push({name:'VideoDetails',params:{id:id}})
      },
      checkVideo(diyname) {
        this.active = diyname;
        this.getHotVideoList();
      },
      //获取栏目分类
      getVideoChild(){
        getChildVideo().then(res=>{
          this.videoList = res.data;
        }).catch(err=>{
          console.log(err);
        })
      },
      //获取栏目列表
      getHotVideoList(){
        this.hotVideoFormData.diyname = this.active;
        // if (getCityName().CODE === undefined){
        //   // this.hotVideoFormData.city_code = 4601
        // } else {
        //   this.hotVideoFormData.city_code = getCityName().CODE;
        // }
        hotVideo(this.hotVideoFormData).then(res=>{
          console.log(res);
          this.hotVideoData = res.data;
        }).catch(err=>{
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped>
  .hot_video_content {
    font-size: 1rem;
    padding: 10px 0;
  }

  .nab_bar {
    display: flex;
    justify-content: space-between;
  }

  .nab_bar > div {
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 25%;
    margin-right: 10px;
    text-align: center;
    font-size: 0.8rem;
  }

  .nab_bar > div:nth-child(4) {
    margin-right: 0;
  }

  .video_hot {
    width: auto;
    height: 10rem;

  }

  .video_hot_content {
    display: none;
  }



  .active {
    /*display: block;*/
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;

  }

  .video_img {
    display: flex;
  }

  .video_img > div {
    width: 6rem;
    height: 8.5rem;
    padding: 10px 10px 10px 0;
  }

  .video_img img {
    width: 6rem;
    height: 6rem;
  }

  .video_img .title {
    font-size: 0.8rem;
    color: #666666;
  }

  .video_img .content {
    font-size: 0.6rem;
    color: #999999;
  }

  .active::-webkit-scrollbar {
    display: none;
  }
  .title_name{
    display: flex;
    justify-content: space-between;
  }
</style>
